<template>
    <div class="components-container" style='height:100vh'>
        <div class='chart-container'>
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5><span class="title">当前监控大盘 </span></h5>
                    <div class="stayRight ">
                        <el-button @click="setMonitor()" >创建监控大盘</el-button>
                        <el-button @click="delMonitor()" >删除监控大盘</el-button>
                    </div>
                </div>
            </section>
            <section class="chartMain">
              <div class="chartChose">
                <div class="chartTop">
                    <el-button size="small" class="fr" @click="addMonitor" >添加云产品监控</el-button>
                    <el-button size="small" class="fr" >刷新</el-button>
                    <el-button size="small" class="fr" @click="fullScreen"  >大屏</el-button>
                    <el-button size="small" class="fr" @click="showNature"  >性能告警</el-button>
                    <div class="setTime">
                      <el-button type="info" size="mini" class="setTimebtn active" >6小时</el-button>
                      <el-button type="info" size="mini" class="setTimebtn" >12小时</el-button>
                      <el-button type="info" size="mini" class="setTimebtn" >1天</el-button>
                      <el-button type="info" size="mini" class="setTimebtn" >3天</el-button>
                      <el-date-picker v-model="datepicker" class="datePicker" type="datetimerange" placeholder="选择时间范围" size="mini"></el-date-picker>
                    </div>
                </div>
              </div>
              <div class="chartShow">
                <!-- <div class="screen">
                  <div class="fl screenItem">
                    <div class="sitem1">
                      <span class="angle anglelt"></span>
                      <span class="angle anglelb"></span>
                      <span class="angle anglert"></span>
                      <span class="angle anglerb"></span>
                      <div id="sitem1" class="itemleft"></div>
                    </div>
                    <div class="sitem1 crumble">
                      <span class="angle anglelt"></span>
                      <span class="angle anglelb"></span>
                      <span class="angle anglert"></span>
                      <span class="angle anglerb"></span>
                      <div id="crumble" class="itemleft"></div>
                    </div>
                    <div class="sitem1">
                      <span class="angle anglelt"></span>
                      <span class="angle anglelb"></span>
                      <span class="angle anglert"></span>
                      <span class="angle anglerb"></span>
                      <div id="neterror" class="itemleft"></div>
                    </div>
                  </div>
                  <div class="fl screenMap">
                    <div class="sitem2">
                      <span class="angle anglelt"></span>
                      <span class="angle anglelb"></span>
                      <span class="angle anglert"></span>
                      <span class="angle anglerb"></span>
                      <div id="sitem2" class="itemmid"></div>
                      <div class="mapbt">
                        <ul>
                          <li class="fl"  v-for="(item,index) in mapArr" :key="index" >
                            <h5>{{item.title}}</h5>
                            <div class="mapChild ">
                              <div class="maptop">
                                <dl class="fl">
                                  <dt>响应时间</dt>
                                  <dd>7.7千ms</dd>
                                </dl>
                                <dl class="fl">
                                  <dt>可用率</dt>
                                  <dd>65.2%</dd>
                                </dl>
                                <dl class="fl">
                                  <dt>请求次数</dt>
                                  <dd>6.66万</dd>
                                </dl>
                              </div>
                              <div :id="item.qid" class="mapChildm"></div>
                            </div>
                            
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="fl screenItem"   v-for="(item,index) in mapDataArr" :key="index">
                    <div class="sitem3 fl">
                      <span class="angle anglelt"></span>
                      <span class="angle anglelb"></span>
                      <span class="angle anglert"></span>
                      <span class="angle anglerb"></span>
                      <div style="overflow:hidden">
                        <div :id="item.qid" class="mapData fl"></div>
                        <ul class="fl">
                          <li>响应时间 : 33ms</li>
                          <li>请求次数 : 532万</li>
                          <li>请求成功 : 530万</li>
                          <li>请求成功率 : 99%</li>
                        </ul>
                      </div>
                      
                    </div>
                  </div>
                </div> -->
                <div class="chartChildItem"  v-for="(item,index) in cityArr" :key="index" >
                  <div class="chart-panel" :id="item.qid" ></div>
                </div>
              </div>
                  
            </section>

            <!-- 添加云产品监控 -->
            <el-dialog title="添加云产品监控" :visible.sync="createMonitor" :lock-scroll="false" size="full">
              <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择产品" prop="prod">
                  <el-select v-model="ruleForm.prod" clearable placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                 <el-form-item label="图表类型" prop="chartType" class="chartType" >
                  <el-select v-model="ruleForm.chartType"  placeholder="请选择" @change="changeChartType">
                    <el-option v-for="item in options2" :key="item.type" :label="item.name" :value="item.type" >
                    </el-option>
                  </el-select>
                </el-form-item> 
                <div class="proChart" id="proChart"></div>
                <el-form-item label="监控项" prop="monitor">
                  <el-select v-model="ruleForm.monitor" clearable placeholder="请选择">
                    <!-- <el-option v-for="item in options1" :key="item.type" :label="item.name" :value="item.type">
                    </el-option> -->
                  </el-select>
                </el-form-item>
                <el-form-item label="过滤" prop="filter">
                  <el-select v-model="ruleForm.filter" clearable placeholder="请选择">
                    <!-- <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">
                    </el-option> -->
                  </el-select>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
                  <el-button @click="createRule = false">取 消</el-button>
                </el-form-item>
              </el-form>
                      
            </el-dialog>

            <!-- 大屏展示 -->
            <el-dialog title="应用保障系统大屏展示" :visible.sync="tofullScreen" top="0" :lock-scroll="false" size="large" :before-close="closePscreen" custom-class="screen">
              <div class="screenbd"> 
                <div class="fl screenItem">
                  <div class="sitem1">
                    <span class="angle anglelt"></span>
                    <span class="angle anglelb"></span>
                    <span class="angle anglert"></span>
                    <span class="angle anglerb"></span>
                    <div id="sitem1" class="itemleft"></div>
                  </div>
                  <div class="sitem1 crumble">
                    <span class="angle anglelt"></span>
                    <span class="angle anglelb"></span>
                    <span class="angle anglert"></span>
                    <span class="angle anglerb"></span>
                    <div id="crumble" class="itemleft"></div>
                  </div>
                  <div class="sitem1">
                    <span class="angle anglelt"></span>
                    <span class="angle anglelb"></span>
                    <span class="angle anglert"></span>
                    <span class="angle anglerb"></span>
                    <div id="neterror" class="itemleft"></div>
                  </div>
                </div>
                <div class="fl screenMap">
                  <div class="sitem2">
                    <span class="angle anglelt"></span>
                    <span class="angle anglelb"></span>
                    <span class="angle anglert"></span>
                    <span class="angle anglerb"></span>
                    <div id="sitem2" class="itemmid"></div>
                    <div class="mapbt">
                      <ul>
                        <li class="fl"  v-for="(item,index) in mapArr" :key="index" >
                          <h5>{{item.title}}</h5>
                          <div class="mapChild ">
                            <div class="maptop">
                              <dl class="fl">
                                <dt>响应时间</dt>
                                <dd>7.7千ms</dd>
                              </dl>
                              <dl class="fl">
                                <dt>可用率</dt>
                                <dd>65.2%</dd>
                              </dl>
                              <dl class="fl">
                                <dt>请求次数</dt>
                                <dd>6.66万</dd>
                              </dl>
                            </div>
                            <div :id="item.qid" class="mapChildm"></div>
                          </div>
                          
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="fl screenItem screenItemRight">
                  <div class="sitem3 fl"   v-for="(item,index) in mapDataArr" :key="index">
                    <span class="angle anglelt"></span>
                    <span class="angle anglelb"></span>
                    <span class="angle anglert"></span>
                    <span class="angle anglerb"></span>
                    <div style="overflow:hidden">
                      <div :id="item.qid" class="mapData fl"></div>
                      <ul class="fl">
                        <li>响应时间 : 33ms</li>
                        <li>请求次数 : 532万</li>
                        <li>请求成功 : 530万</li>
                        <li>请求成功率 : 99%</li>
                      </ul>
                    </div>
                    
                  </div>
                </div>
              </div>
              
            </el-dialog>

            <!-- 大屏展示 -->
            <el-dialog :title="updateTime" center :visible.sync="natureScreen" top="0" :lock-scroll="true" size="full" custom-class="natureSbg" :show-close="natureClose">
              <div class="sub">qps：每秒点击量</div>
              <div class="naturebd">   
                <div class="natureCharts" v-for="(item,index) in cpuArr" :key="index"  >
                  <a :href="'http://cat.infinitus.com.cn/cat/r/t?op=view&domain='+item.domain+'&reportType=day'" target="_blank">
                  <div class="nature-panel" :id="'cpu'+item.id" >
                  </div>
                  <div class="cpumem">QPS</br>{{item.qps}}</div>
                  <table class="subtitle">
                  	<tr>
                  		<td style="width: 50%;">响应时间：{{item.avgRpTime}}ms</td>
                  		<td style="width: 50%;">活动线程：{{item.activeThread}}</td>
                  	</tr>
                  	<tr>
                  		<td style="width: 50%;">错误数：{{item.errorNum}}</td>
                  		<td style="width: 50%;">CPU使用率：{{item.cpuUsage}}%</td>
                  	</tr>
                  	<tr>
                  		<td colspan="2">DB连接数：</td>
                  	</tr>
                  	<tr>
                  		<td colspan="2">{{item.activeCount}}</td>
                  	</tr>
                  </table>
                  </a>
                </div>
              </div>
              
            </el-dialog>
        </div>
      </div>
</template>

<script>
// import '@/api/china'
import { getCity, product, mapList, mapDataList, cupList } from '@/api/dashboard'
import echarts from 'echarts'
import screenfull from 'screenfull'
import axios from 'axios'

export default {
  data() {
    return {
      datepicker: '',
      cityArr: [],
      mapArr: [],
      cpuArr: [],
      updateTime: '',
      mapDataArr: [],
      createMonitor: false,
      tofullScreen: false,
      natureScreen: false,
      natureClose: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      ruleForm: {
        prod: '',
        chartType: '',
        monitor: '',
        filter: ''
      },
      options1: [],
      options2: [{
        name: '折线',
        type: 'line'
      }, {
        name: '柱状',
        type: 'bar'
      }]
    }
  },
  mounted() {
    this.showCharts()
    if (this.$route.query.boardLink) {
      this.natureClose = false
      this.showNature()
    }
    // this.screenfullShow()
  },
  methods: {
    showCharts() {
      const _this = this
      getCity(this.listQuery).then(response => {
        const json = response.data
        // console.log(json, 'json')
        _this.cityArr = json.items
        _this.cityArr.forEach(function(element, index) {
          var id = element.qid
          var time = []
          var timeData = []
          element.serTrends.forEach(function(item2) {
            time.push(item2.timePoint)
            timeData.push(item2.reqCnt)
          }, this)
          setTimeout(function() {
            const myChart = echarts.init(document.getElementById(id))
            // 绘制图表
            const option = {
              title: {
                text: element.title
              },
              xAxis: {
                type: 'category',
                data: time
              },
              yAxis: {},
              series: [
                {
                  type: element.type,
                  data: timeData
                }
              ]
            }
            myChart.setOption(option)
          }, 1000)
        }, 1000)
      })
    },
    addMonitor() {
      this.createMonitor = true
      product().then(response => {
        const json = response.data
        this.options1 = json.data
        console.log(json, 'json')
      })
      this.proChart()
    },
    fullScreen() {
      this.tofullScreen = true
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.screenfullShow()
    },
    closePscreen(done) {
      // console.log(done, 'done')
      if (screenfull.enabled) {
        screenfull.toggle()
      }
      this.tofullScreen = false
    },
    screenfullShow() {
      const _this = this
      setTimeout(function() {
        axios.get('/maps').then((res) => {
          echarts.registerMap('china', res.data)
          if (map != null && map !== '' && map !== undefined) {
            map.dispose()
          }
          const map = echarts.init(document.getElementById('sitem2'))
          var data = [
            { name: '海门', value: 9 },
            { name: '泉州', value: 13 },
            { name: '莱西', value: 139 },
            { name: '日照', value: 23 },
            { name: '胶南', value: 32 },
            { name: '云浮', value: 42 },
            { name: '烟台', value: 23 },
            { name: '福州', value: 25 },
            { name: '湛江', value: 24 },
            { name: '揭阳', value: 23 },
            { name: '荣成', value: 19 },
            { name: '连云港', value: 39 },
            { name: '葫芦岛', value: 49 },
            { name: '常熟', value: 96 },
            { name: '东莞', value: 59 },
            { name: '三亚', value: 39 },
            { name: '自贡', value: 79 },
            { name: '吉林', value: 95 },
            { name: '阳江', value: 49 },
            { name: '镇江', value: 49 },
            { name: '邯郸', value: 29 },
            { name: '临沂', value: 29 },
            { name: '哈尔滨', value: 59 },
            { name: '聊城', value: 79 },
            { name: '芜湖', value: 89 },
            { name: '大庆', value: 179 }
          ]
          var geoCoordMap = {
            '海门': [121.15, 31.89],
            '泉州': [118.58, 24.93],
            '莱西': [120.53, 36.86],
            '日照': [119.46, 35.42],
            '胶南': [119.97, 35.88],
            '云浮': [112.02, 22.93],
            '烟台': [121.39, 37.52],
            '福州': [119.3, 26.08],
            '湛江': [110.359377, 21.270708],
            '揭阳': [116.35, 23.55],
            '荣成': [122.41, 37.16],
            '连云港': [119.16, 34.59],
            '葫芦岛': [120.836932, 40.711052],
            '常熟': [120.74, 31.64],
            '东莞': [113.75, 23.04],
            '三亚': [109.511909, 18.252847],
            '自贡': [104.778442, 29.33903],
            '吉林': [126.57, 43.87],
            '阳江': [111.95, 21.85],
            '镇江': [119.44, 32.2],
            '邯郸': [114.47, 36.6],
            '临沂': [118.35, 35.05],
            '哈尔滨': [126.63, 45.75],
            '聊城': [115.97, 36.45],
            '芜湖': [118.38, 31.33],
            '大庆': [125.03, 46.58]
          }
          var convertData = function(data) {
            var res = []
            for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name]
              if (geoCoord) {
                res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
                })
              }
            }
            return res
          }
          const option2 = {
            backgroundColor: '#242b3e',
            borderColor: '#5d6e9c',
            title: {
              text: '534534656',
              subtext: '······ DAU ······',
              x: 'center',
              textStyle: {
                color: '#b4f5d7'
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: function(params) {
                return params.name + ' : ' + params.value[2]
              }
            },
            legend: {
              orient: 'vertical',
              y: 'bottom',
              x: 'right',
              data: ['pm2.5'],
              textStyle: {
                color: '#fff'
              }
            },
            visualMap: {
              min: 0,
              max: 200,
              calculable: true,
              inRange: {
                color: ['#50a3ba', '#eac736', '#d94e5d']
              },
              textStyle: {
                color: '#fff'
              }
            },
            geo: {
              map: 'china',
              label: {
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  areaColor: '#323c48',
                  borderColor: '#111'
                },
                emphasis: {
                  areaColor: '#2a333d'
                }
              }
            },
            series: [{
              name: 'pm2.5',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(data),
              // symbol: 'pin',
              symbolSize: 8,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  borderColor: '#fff',
                  borderWidth: 1
                }
              }
            }, {
              name: 'Top 5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: convertData(data.sort(function(a, b) {
                return b.value - a.value
              }).slice(0, 6)),
              // symbol: 'pin',
              symbolSize: function(val) {
                // console.log(val, 'symbolSize')
                return val[2] / 10
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: 'purple',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            }]
          }
          map.setOption(option2)
          var randomValue = function(data) {
            return Math.round(Math.random() * 1000)
          }
          mapList().then(response => {
            const json = response.data
            _this.mapArr = json.items
            _this.mapArr.forEach(function(element, index) {
              var id = element.qid
              var time = []
              var timeData = []
              element.serTrends.forEach(function(item2) {
                time.push(item2.timePoint)
                timeData.push(item2.reqCnt)
              }, this)
              setTimeout(function() {
                const mapchild1 = echarts.init(document.getElementById(id))
                // 绘制图表
                const optionChild = {
                  backgroundColor: '#242b3e',
                  borderColor: '#5d6e9c',
                  title: {
                    x: 'center',
                    textStyle: {
                      color: '#b4f5d7'
                    }
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                      return params.name + ' : ' + params.value[2]
                    }
                  },
                  legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    data: ['pm2.5'],
                    textStyle: {
                      color: '#fff'
                    }
                  },
                  visualMap: {
                    min: 0,
                    max: 200,
                    calculable: true,
                    show: false,
                    text: ['High', 'Low']
                  },
                  geo: {
                    map: 'china',
                    label: {
                      emphasis: {
                        show: false
                      }
                    },
                    itemStyle: {
                      normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                      },
                      emphasis: {
                        areaColor: '#2a333d'
                      }
                    }
                  },
                  series: [{
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    // symbol: 'pin',
                    symbolSize: 4,
                    label: {
                      normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                      },
                      emphasis: {
                        show: true
                      }
                    },
                    itemStyle: {
                      emphasis: {
                        borderColor: '#fff',
                        borderWidth: 1
                      }
                    }
                  }, {
                    name: 'categoryA',
                    type: 'map',
                    geoIndex: 0,
                    // tooltip: {show: false},
                    data: [
                      { name: '北京', value: randomValue() },
                      { name: '天津', value: randomValue() },
                      { name: '上海', value: randomValue() },
                      { name: '重庆', value: randomValue() },
                      { name: '河北', value: randomValue() },
                      { name: '河南', value: randomValue() },
                      { name: '云南', value: randomValue() },
                      { name: '辽宁', value: randomValue() },
                      { name: '黑龙江', value: randomValue() },
                      { name: '湖南', value: randomValue() },
                      { name: '安徽', value: randomValue() },
                      { name: '山东', value: randomValue() },
                      { name: '新疆', value: randomValue() },
                      { name: '江苏', value: randomValue() },
                      { name: '浙江', value: randomValue() },
                      { name: '江西', value: randomValue() },
                      { name: '湖北', value: randomValue() },
                      { name: '广西', value: randomValue() },
                      { name: '甘肃', value: randomValue() },
                      { name: '山西', value: randomValue() },
                      { name: '内蒙古', value: randomValue() },
                      { name: '陕西', value: randomValue() },
                      { name: '吉林', value: randomValue() },
                      { name: '福建', value: randomValue() },
                      { name: '贵州', value: randomValue() },
                      { name: '广东', value: randomValue() },
                      { name: '青海', value: randomValue() },
                      { name: '西藏', value: randomValue() },
                      { name: '四川', value: randomValue() },
                      { name: '宁夏', value: randomValue() },
                      { name: '海南', value: randomValue() },
                      { name: '台湾', value: randomValue() },
                      { name: '香港', value: randomValue() },
                      { name: '澳门', value: randomValue() }
                    ]
                  }]
                }
                mapchild1.setOption(optionChild)
              }, 1000)
            }, 1000)
          })
          mapDataList().then(response => {
            const json = response.data
            console.log(json, 'mapDataList')
            _this.mapDataArr = json.items
            _this.mapDataArr.forEach(function(element, index) {
              var id = element.qid
              var time = []
              var timeData = []
              element.serTrends.forEach(function(item2) {
                time.push(item2.timePoint)
                timeData.push(item2.reqCnt)
              }, this)
              setTimeout(function() {
                const mapdatachild = echarts.init(document.getElementById(id))
                // 绘制图表
                const optiondataChild = {
                  backgroundColor: '#242b3e',
                  borderColor: '#5d6e9c',
                  title: {
                    x: 'center',
                    name: element.title,
                    textStyle: {
                      color: '#b4f5d7'
                    }
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                      return params.name + ' : ' + params.value[2]
                    }
                  },
                  legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    data: ['pm2.5'],
                    textStyle: {
                      color: '#fff'
                    }
                  },
                  visualMap: {
                    min: 0,
                    max: 200,
                    calculable: true,
                    show: false,
                    text: ['High', 'Low']
                  },
                  geo: {
                    map: 'china',
                    label: {
                      emphasis: {
                        show: false
                      }
                    },
                    itemStyle: {
                      normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                      },
                      emphasis: {
                        areaColor: '#2a333d'
                      }
                    }
                  },
                  series: [{
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    // symbol: 'pin',
                    symbolSize: 8,
                    label: {
                      normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                      },
                      emphasis: {
                        show: true
                      }
                    },
                    itemStyle: {
                      emphasis: {
                        borderColor: '#fff',
                        borderWidth: 1
                      }
                    }
                  }, {
                    name: 'categoryA',
                    type: 'map',
                    geoIndex: 0,
                    // tooltip: {show: false},
                    data: [
                      { name: '北京', value: randomValue() },
                      { name: '天津', value: randomValue() },
                      { name: '上海', value: randomValue() },
                      { name: '重庆', value: randomValue() },
                      { name: '河北', value: randomValue() },
                      { name: '河南', value: randomValue() },
                      { name: '云南', value: randomValue() },
                      { name: '辽宁', value: randomValue() },
                      { name: '黑龙江', value: randomValue() },
                      { name: '湖南', value: randomValue() },
                      { name: '安徽', value: randomValue() },
                      { name: '山东', value: randomValue() },
                      { name: '新疆', value: randomValue() },
                      { name: '江苏', value: randomValue() },
                      { name: '浙江', value: randomValue() },
                      { name: '江西', value: randomValue() },
                      { name: '湖北', value: randomValue() },
                      { name: '广西', value: randomValue() },
                      { name: '甘肃', value: randomValue() },
                      { name: '山西', value: randomValue() },
                      { name: '内蒙古', value: randomValue() },
                      { name: '陕西', value: randomValue() },
                      { name: '吉林', value: randomValue() },
                      { name: '福建', value: randomValue() },
                      { name: '贵州', value: randomValue() },
                      { name: '广东', value: randomValue() },
                      { name: '青海', value: randomValue() },
                      { name: '西藏', value: randomValue() },
                      { name: '四川', value: randomValue() },
                      { name: '宁夏', value: randomValue() },
                      { name: '海南', value: randomValue() },
                      { name: '台湾', value: randomValue() },
                      { name: '香港', value: randomValue() },
                      { name: '澳门', value: randomValue() }
                    ]
                  }]
                }
                mapdatachild.setOption(optiondataChild)
              }, 1000)
            }, 1000)
          })
        })
        const crumble = echarts.init(document.getElementById('crumble'))
        const coption = {
          title: {
            text: '崩溃',
            textStyle: {
              color: '#3e8ed7',
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#3e5f8c'
              }
            }
          },
          legend: {
            data: ['崩溃率'],
            x: 'center',
            y: 'bottom',
            textStyle: {
              color: '#acddfb'
            }
          },
          grid: {
            left: '4%',
            right: '4%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['14:08', '14:28', '14:48', '15:28', '15:48', '16:08'],
              // axisLabel: {
              //   show: true,
              //   textStyle: {
              //     color: '#6284b4'
              //   }
              // },
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#6284b4'
                }
              }
            }
          ],
          color: ['#c3798a', '#85ebed'],
          series: [
            {
              name: '崩溃率',
              type: 'line',
              stack: '总量',
              smooth: true,
              areaStyle: { normal: {}},
              data: [0.5, 2, 1, 1, 3, 0.75]
            }
          ]
        }
        crumble.setOption(coption)
        const product = echarts.init(document.getElementById('sitem1'))
        const option = {
          title: {
            text: '平均响应时间',
            textStyle: {
              color: '#3e8ed7',
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#3e5f8c'
              }
            }
          },
          legend: {
            data: ['DNS', 'SSL'],
            x: 'center',
            y: 'bottom',
            textStyle: {
              color: '#acddfb'
            }
          },
          grid: {
            left: '4%',
            right: '4%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['14:08', '14:28', '14:48', '15:28', '15:48', '16:08'],
              // axisLabel: {
              //   show: true,
              //   textStyle: {
              //     color: '#6284b4'
              //   }
              // },
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#6284b4'
                }
              }
            }
          ],
          color: ['#fcffa2', '#85ebed'],
          series: [
            {
              name: 'DNS',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {}},
              data: [120, 132, 44, 134, 90, 230, 210]
            },
            {
              name: 'SSL',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: { normal: {}},
              data: [820, 932, 533, 934, 1290, 150, 1020]
            }
          ]
        }
        product.setOption(option)
        const neterror = echarts.init(document.getElementById('neterror'))
        const noption = {
          title: {
            text: '网络错误',
            textStyle: {
              color: '#3e8ed7',
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#3e5f8c'
              }
            }
          },
          legend: {
            data: ['网络错误次数', '网络错误率'],
            x: 'center',
            y: 'bottom',
            textStyle: {
              color: '#acddfb'
            }
          },
          grid: {
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: ['14:08', '14:28', '14:48', '15:28', '15:48', '16:08'],
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              max: 500,
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: true,
                formatter: '{value} ',
                textStyle: {
                  color: '#6284b4'
                }
              }
            }, {
              type: 'value',
              max: 1,
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              },
              axisLabel: {
                show: true,
                formatter: '{value} %',
                textStyle: {
                  color: '#6284b4'
                }
              }
            }

          ],
          color: ['#317ee8'],
          series: [
            {
              name: '网络错误率',
              xAxisIndex: 0,
              yAxisIndex: 1,
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    type: 'dotted',
                    color: '#cce6ff'
                  }
                }
              },
              data: [0.3, 0.25, 0.6, 0.15, 0.4, 0.6, 0.3]
            }, {
              name: '网络错误次数',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {}},
              data: [120, 132, 44, 134, 90, 230, 210]
            }
          ]
        }
        neterror.setOption(noption)
      }, 1000)
    },
    showNature() {
      var _this = this
      this.natureScreen = true
      setInterval(cupdataList, 60000)
      function cupdataList() {
        cupList().then(response => {
          _this.cpuArr = response.data.cpuJson
          _this.updateTime = '性能告警展示（' + response.data.updateTime + '）'
          _this.cpuArr.forEach(function(element, index) {
            const id = 'cpu' + element.id
            const timeData = []
            const pp = JSON.parse(element.cpuJson.substring(1, element.cpuJson.length - 1))
            const time = []
            pp.series[0].values.forEach(function(item2) {
              var now = new Date()
              now.setTime(item2[0])
              var year = now.getFullYear()
              var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
              var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
              var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
              var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
              var timeStr = year + '/' + month + '/' + date + ' \n ' + hour + ':' + minute
              time.push(timeStr)
              timeData.push(item2[1])
            }, this)
            setTimeout(function() {
              const product = echarts.init(document.getElementById(id))
              const option = {
                animation: false,
                title: {
                  left: 'center',
                  text: element.domain,
                  textStyle: {
                    color: '#fff',
                    fontSize: 15
                  },
                  subtextStyle: {
                    color: '#fff'
                  }
                },
                legend: {
                  top: 'bottom'
                },
                tooltip: {
                  trigger: 'axis',
                  position: function(pt) {
                    return [pt[0], 130]
                  }
                },
                xAxis: {
                  show: false,
                  type: 'category',
                  boundaryGap: [0, 0],
                  splitNumber: 10,
                  splitLine: {
                    show: false
                  },
                  axisLabel: {
                    show: false
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#6284b4'
                    }
                  },
                  data: time
                },
                yAxis: {
                  // min: 0,
                  // max: 500,
                  show: false,
                  type: 'value',
                  axisTick: {
                    inside: true
                  },
                  splitLine: {
                    show: false
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#6284b4'
                    }
                  },
                  axisLabel: {
                    show: false
                    // inside: true,
                    // formatter: '{value}\n'
                  },
                  z: 10
                },
                grid: {
                  top: 100,
                  left: 15,
                  right: 15,
                  height: 120,
                  containLabel: false
                },
                dataZoom: [{
                  type: 'inside',
                  throttle: 50
                }],
                series: [
                  {
                    name: 'QPS',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    sampling: 'average',
                    itemStyle: {
                      normal: {
                        color: '#356aac'
                      }
                    },
                    stack: 'a',
                    areaStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#417aaf'
                        }, {
                          offset: 1,
                          color: '#254a7f'
                        }])
                      }
                    },
                    data: timeData
                  }
                ]
              }
              product.setOption(option)
            }, 1000)
          })
        })
      }
      cupdataList()
    },
    proChart(ctype) {
      if (ctype === undefined || ctype === null) ctype = 'line'
      setTimeout(function() {
        const product = echarts.init(document.getElementById('proChart'))
        const option = {
          xAxis: {
            type: 'category',
            data: ['03:44:22', '13:44:22', '20:44:22', '23:44:22', '33:44:22', '43:44:22', '44:44:22']
          },
          yAxis: {},
          series: [
            {
              type: ctype,
              data: [2, 2, 32, 4, 9, 19, 3]
            }
          ]
        }
        product.setOption(option)
      }, 1000)
    },
    changeChartType(val) {
      console.log(val, 'val')
      this.proChart(val)
    },
    submitForm() {},
    setMonitor() {},
    delMonitor() {}
  }
}
</script>
<style  lang="scss" >
ul,li{
  padding:0;
  margin:0;
  list-style: none;
}
.fr{
  float: right;
  margin-right: 10px;
}
.fl{
  float: left;
  margin-right: 10px;
}
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 2;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
            .title{padding: 0 10px;}
            .btn-xs{
                font-size: 12px;
                padding: 2px 8px;
                height: 20px;
                line-height: 14px;
            }
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
        }
    }
}
.chart-container{
  width: 100%;
  height: 80%;
  .chartChose{
    margin-bottom: 20px;
    padding: 10px 0 20px;
    border-bottom:1px solid #eee;
    .setTime{
      .setTimebtn{
        background: #666;
        padding: 4px 10px;
        border: none;
        border-radius: 0;
      }
      .active{
        background: #222;
      }
      .datePicker{
        margin-left: 10px;
      }
    }
  }
  .chartShow{
    overflow: hidden;
  }
  .chartChildItem{
    height: 400px;
    width: 33%;
    left: 0;
    // margin-left: 5%;
    float: left;
    position: relative;
    .chart-panel{
      height: 400px;
      width: 100%;
      left: 0;
      position: relative;

    }
  }
}
.proChart{
  width:100%;
  height: 300px;
}
.chartType{
  position: absolute;
  right: 0;
  top: 50px;
}
.screen{
  background: #222931;
  width: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  .el-dialog__title{
    color: #e2fdff;
  }
  .screenbd{
    clear: both;
  }
  .screenItem{
    width: 25%;
    margin-right: 1%;
    .sitem1{
      position: relative;
      border-radius: 3px;
      border: 2px solid #6c7ea6;
        margin-bottom:10px;
      .itemleft{
        height: 290px;
        padding:10px 0;
        box-sizing: border-box;
      }
    }
    .crumble{
      .itemleft{
        height: 250px;
        padding:10px 0;
        box-sizing: border-box;
      }
    }
    .sitem3{
      height: 150px;
      position: relative;
      border-radius: 3px;
      border: 2px solid #6c7ea6;
      background: #242b3e;
      margin-bottom:10px;
      width:48%;
      margin-right: 2%;
      box-sizing: border-box;
      ul{
        width:50%;
        padding: 20px 0;
        margin: 0;
        li{
          color: #bdfcff;
          background: #5e9bba;
          margin-bottom: 10px;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          padding: 0 4px;
          font-size:12px;
        }
      }
      .mapData{
        width: 50%;
        height: 146px;
        margin: 0;
      }
    }
    
  }
  .screenMap{
    width: 44%;
    .sitem2{
      position: relative;
      border: 2px solid #6c7ea6;
      border-radius: 3px;
      .itemmid{
        width: 100%;
        height: 600px;
        padding:10px;
        box-sizing: border-box;
      }
    }
    .mapbt{
      overflow: hidden;
      height: 256px;
      background: #242b3e;
      li{
        width: 30%;
        margin-left: 2.2%;
        margin-right:0;
        h5{
          color:#abdeef;
          text-align: center;
          line-height: 30px;
          margin: 0;
        }
      }
      .mapChild{
        height: 200px;
        width: 100%;
        border: 1px solid #6c7ea6;
        position: relative;
        .maptop{
          position: absolute;
          top: 140px;
          left: 0;
          overflow: hidden;
          width: 100%;
          height: 60px;
          dl{
            color: #abdeef;
            width: 30%;
            margin:0 0 0 2%;
              font-size: 12px;
            dt{
              font-size: 12px;
              white-space: nowrap;
              overflow: hidden;
              margin: 0;
            }
            dd{
              color: #bdfcff;
              background: #5e9bba;
              margin:10px 0 0;
              line-height: 20px;
              white-space: nowrap;
              overflow: hidden;
              padding: 0 4px;
            }
          }
        }
        .mapChildm{
          height: 130px;
        }
      }
    }
  }
  .screenItemRight{
    width:28%;
    margin-right: 0;
  }
  .angle{
    position: absolute;
    border:2px solid #cce6ff;
    display: block;
    width: 6px;
    height: 6px;
  }
  .anglelt{
    top:-2px;
    left: -2px;
    border-top-left-radius: 3px;
    border-bottom: none;
    border-right: none;
  }
  .anglelb{
    bottom:-2px;
    left: -2px;
    border-bottom-left-radius: 3px;
    border-top: none;
    border-right: none;
  }
  .anglert{
    right: -2px;
    top: -2px;
    border-top-right-radius: 3px;
    border-bottom: none;
    border-left: none;
  }
  .anglerb{
    right: -2px;
    bottom: -2px;
    border-bottom-right-radius: 3px;
    border-top: none;
    border-left: none;
  }
}
.natureSbg{
  background: #222931;
  width: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  .el-dialog__title{
    color: #e2fdff;
  }
  .el-dialog__header{
    text-align: center;
  }
  .naturebd{
    overflow: hidden;
  }
}
.sub{
  text-align:center;
  color: #e2fdff;
  padding-bottom: 30px;
}
.natureCharts{
  width: 20%;
  // padding: 10px;
  box-sizing: border-box;
  float: left;
  position: relative;
  .cpumem{
    position: absolute;
    left: 25%;
    bottom: 20%;
    width: 50%;
    text-align: center;
    color: #e2fdff;
    font-size: 12px;
  }
  .subtitle{
     position: absolute;
     left: 5%;
     top: 15%;
     width: 100%;
     color: #e2fdff;
     font-size: 12px;
  }
  .nature-panel{
      height: 200px;
      width: 100%;
      left: 0;
      position: relative;

    }
 	
}
</style> 